; (function () {
    "use strict"
    function Big(ops) {
        // 选择元素
        this.previmgs = ops.previmgs
        console.log(this.previmgs);
        this.png = ops.png;
        console.log(this.png);
        this.flname = ops.flname;
        this.tit = ops.tit;
        this.prem = ops.prem;
        this.prodinto = ops.prodinto
        this.sBox = ops.sBox;
        this.sBspan = ops.sBspan;
        this.bBox = ops.bBox;
        this.bBimg = ops.bBimg;
        this.prev = ops.prev;
        this.arr = ["http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg", "http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg", "http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg", "http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg"];
        this.sBoxImg = ops.sBoxImg;
        this.url = "http://localhost:3000/data/data.json";
        this.load()
        // 绑定事件
        this.addEvent()
    }
    Big.prototype.load = function () {
        ajax({
            url: this.url,
            success: (res) => {
                this.res = JSON.parse(res);
                this.render()
            }
        })
    }
    Big.prototype.render = function () {
        const that = this;
        for (let i = 0; i < this.res.length; i++) {
            if (this.res[i].proId === getCookie("climg")) {
                this.flname.innerHTML = this.res[i].product_name;
                this.tit.innerHTML = this.res[i].title;
                this.prem.innerHTML = this.res[i].price;
                for (let j = 0; j < this.png.length; j++) {
                    this.png[j].src = this.res[i].url
                    this.previmgs[j].src = this.res[i].url
                }
            }
        }
    }
    Big.prototype.addEvent = function () {
        const that = this;
        // 绑定进入
        this.sBox.onmouseover = function () {
            // 显示
            that.show()
        }
        // 绑定离开
        this.sBox.onmouseout = function () {
            // 隐藏
            that.hide()
        }
        // 绑定移动
        this.sBox.onmousemove = function (eve) {
            const e = eve || window.event;
            // 移动
            that.move(e);
        }

        for (let i = 0; i < this.prev.length; i++) {
            this.prev[i].onmousemove = function () {
                that.Change(i);
            }
        }
    }

    Big.prototype.Change = function (i) {
        this.sBoxImg.src = this.res[i].url;
        this.bBimg.src = this.res[i].url;
    }
    Big.prototype.show = function () {
        this.bBox.style.display = "block";
        this.sBspan.style.display = "block";
        // 设置span的尺寸
        // 提醒一定要在显示之后设置，否则，显示之前无法获取css样式
        // 提前获取各种尺寸
        this.sbw = this.sBox.offsetWidth;
        this.sbh = this.sBox.offsetHeight;
        this.bbiw = this.bBimg.offsetWidth;
        this.bbih = this.bBimg.offsetHeight;
        this.bbw = this.bBox.offsetWidth;
        this.bbh = this.bBox.offsetHeight;

        // 计算并设置span的尺寸
        this.sBspan.style.width = this.sbw / (this.bbiw / this.bbw) + "px";
        this.sBspan.style.height = this.sbh / (this.bbih / this.bbh) + "px";
    }
    Big.prototype.hide = function () {
        this.bBox.style.display = "none";
        this.sBspan.style.display = "none";
    }
    Big.prototype.move = function (e) {
        let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth / 2;
        let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight / 2

        // 边界限定
        if (l < 0) l = 0;
        if (t < 0) t = 0;
        if (l > this.sbw - this.sBspan.offsetWidth) {
            l = this.sbw - this.sBspan.offsetWidth
        }
        if (t > this.sbh - this.sBspan.offsetHeight) {
            t = this.sbh - this.sBspan.offsetHeight
        }

        // 设置span的跟随效果
        this.sBspan.style.left = l + "px";
        this.sBspan.style.top = t + "px";

        // 计算比例
        // 当前移动的距离 / 一共能移动的距离
        let x = l / (this.sbw - this.sBspan.offsetWidth);
        let y = t / (this.sbh - this.sBspan.offsetHeight);
        // console.log(x, y)

        // 跟随移动
        // 当前移动的距离 = 总距离 * 比例
        this.bBimg.style.left = (this.bbw - this.bbiw) * x + "px";
        this.bBimg.style.top = (this.bbh - this.bbih) * y + "px";
    }


    new Big({
        sBox: document.querySelector(".swer"),
        sBoxImg: document.querySelector(".swer img"),
        bBox: document.querySelector("#b_box"),
        bBimg: document.querySelector("#b_box     img"),
        sBspan: document.querySelector("#lay"),
        prev: document.querySelectorAll(".pre-1 img"),
        prodinto: document.querySelector(".product-intro"),
        flname: document.querySelector(".flname"),
        tit: document.querySelector(".tit"),
        prem: document.querySelector(".prem"),
        png: document.querySelectorAll(".swer img"),
        previmgs: document.querySelectorAll(".preview-list img")
    });
    // 选项卡



})();

